<template>
    <div class="phard">
        <div class="ph-top">
            <img :src="cards.coverImgUrl" alt="">
            <div class="top-tiem">{{cards.createTime |formate }}更新</div>
            <div class="top-play">
                <i class="el-icon-video-play"></i>
            </div>
        </div>
        <div class="ph-list" v-for="(item,index) in SongList" :key="index">
            <div class="left">
                <span class="span1">{{index+1}}</span>
                <span>{{item[0].al.name }}</span>
            </div>
            <div class="right">
                {{ item[0].ar[0].name }}
            </div>
        </div>
        <div class="ph-bottom">
            全部
        </div>
    </div>
</template>

<script>
    import {
        getCard,
        getPhongListDetail
    } from "../network/phang"
    import {
        formatDateTime
    } from "@/common/common"
    export default {
        name: "PhCard",
        props: {
            cards: {
                type: Object
            }
        },
        data() {
            return {
                SongList: []
            }
        },
        created() {
            // console.log(this.cards.id);
        },
        watch: {
            cards: function (val) {
                this.getCard1(val.id)
                // console.log(val.id);
            }
        },
        filters: {
            formate: function (val) { //val 处理的数据 1404115136883    日 时
                //处理方法  
                const tiemData = formatDateTime(val)
                return tiemData
            }
        },
        methods: {
            getCard1(id) {
                getCard("/playlist/detail", {
                    id: id
                }).then(res => {
                    console.log(res);
                    //只是榜单中的 id表
                    //  获取 获取榜单中的详细信息 id 一次要获取到8个
                    const list = res.privileges.splice(0, 8);
                    //  this.getDetailSong(res.privileges[0].id)
                    list.map((item) => {
                        this.getDetailSong(item.id);
                    });
                })
            },
            getDetailSong(ids) {
                getPhongListDetail("/song/detail", {
                    ids: ids,
                }).then((res) => {
                    this.SongList.push(res.songs);
                    // console.log(this.SongList);
                });
            },

        }
    }
</script>

<style lang="less">
    .phard {
        margin: 10px;
        width: 300px;
        border: 1px solid red;

        .ph-top {
            width: 100%;
            height: 100px;
            position: relative;

            img {
                width: 100%;
                height: 100%;
            }

            .top-play {
                cursor: pointer;
                position: absolute;
                width: 30px;
                height: 30px;
                font-size: 30px;
                border-radius: 50%;
                right: 4px;
                bottom: 8px;
                color: #fff;
            }

            .top-tiem {
                position: absolute;
                left: 10px;
                bottom: 8px;
                color: #fff;
                cursor: pointer;
            }
        }

        .ph-list {
            cursor: pointer;
            padding: 2px 10px;
            display: flex;
            justify-content: space-between;

            &:nth-child(even) {
                background-color: #aaa;
            }

            &:nth-child(odd) {
                background-color: #fff;
            }

            .span1 {
                color: red;
                margin-right: 5px;
                font-weight: 700;
            }
        }

        .ph-list:hover {
            background-color: #f5f5f7;
        }

        .ph-bottom {
            height: 25px;
            line-height: 25px;
            text-align: right;
            padding: 0 5px;
        }
    }
</style>